<template>
	<view class="page">
		<view class="top">
			<view class="top-text">一键发布需求，极速响应! </view>
			<view class="top-text-1">目前共有33条需求</view>
		</view>
		<view class="con-box" v-for="(item,index) in 6" :key="item.id" :style="{'marginTop':index==0?'-220rpx':'0'}">
			<view class="title">【北京市】2024-09-11去北京市的团建需求</view>
			<view class="detail">咨询执行报价，同业资源需求。教练、导游、领队、酒店、
				景区门票，搭建团建道具</view>
			<view class="flex" @click="handleCall(item.phone)">
				<view class="flex-1">
					<image src="https://www.atuanjian.com/appletStatic/static/images/u-15.png" mode=""></image>
					Gavin
				</view>
				<view class="flex-1">
					<image src="https://www.atuanjian.com/appletStatic/static/images/u-16.png" mode=""></image>
					13
				</view>
			</view>
			<view class="flex">
				<view class="flex-2">1个月前发布</view>
				<view class="flex-btn">联系TA</view>
			</view>
		</view>
		<view style="width: 100%;height: 115rpx;"></view>
		<view class="bottom">
			<view class="bottom-btn">
				<image src="https://www.atuanjian.com/appletStatic/static/images/u-17.png" mode="" />我也要提交需求
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		}
	}
</script>

<style lang="scss" scoped>
	.top {
		background-image: linear-gradient(to bottom, #FFB850, #F2F2F2);
		width: 100%;
		height: 400rpx;

		.top-text {
			text-align: center;
			color: #fff;
			font-size: 40rpx;
			padding-top: 20rpx;
		}

		.top-text-1 {
			color: #fff;
			font-size: 25rpx;
			text-align: center;
			margin-top: 20rpx;
		}
	}

	.page {
		background-color: #F2F2F2;
		height: 100vh;
		overflow-y: scroll;
		
		.bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 115rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #fff;
			z-index: 99;
			.bottom-btn {
				width: 694rpx;
				height: 87rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #FFB850;
				color: #fff;
				font-size: 25rpx;
				border-radius: 64rpx;
				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 16rpx;
				}
			}
		}

		.con-box {
			width: 644rpx;
			padding: 16rpx 30rpx 26rpx 30rpx;
			background-color: #fff;
			border-radius: 16rpx;
			margin: 0 auto 20rpx;
			position: relative;
			z-index: 9;
			.title {
				font-size: 27rpx;
			}

			.detail {
				margin-top: 26rpx;
				font-size: 23rpx;
			}

			.flex {
				width: 100%;
				display: flex;
				justify-content: space-between;
				padding-bottom: 26rpx;
				border-bottom: 1rpx solid #D7D7D7;
				margin-top: 26rpx;

				.flex-1 {
					display: flex;

					image {
						width: 35rpx;
						height: 35rpx;
						margin-right: 16rpx;
					}

					font-size: 24rpx;
					color: #D7D7D7;
				}
				.flex-2{
					font-size:25rpx;
					color: #AAAAAA;
				}
				.flex-btn{
					width: 133rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					color: #FFFFFF;font-size: 24rpx;
					border-radius: 64rpx;
					background-color: #FFB850;
				}
			}
		}
	}
</style>